import React from 'react'
import { NavBar} from "antd-mobile";
import { useNavigate } from 'react-router-dom';
import { List, Switch } from 'antd-mobile';
import { useEffect } from 'react';
import { useState } from 'react';
import { getLogin } from '../../api/index';
export default function Protection() {
    const navigate = useNavigate()
    const [id,setId] = useState('')
    const back = () => {
        navigate(-1);
      };
      function changePassword() {
        navigate('/my/setting/securityCenter/ChangePassword')
      }
      function BindMobilePhone() {
        navigate('/my/setting/securityCenter/BindMobilePhone',{state:{id:id}})
      }
      const [userNames,setUserNames] = useState('')
      useEffect(()=>{
        let user = JSON.parse(localStorage.getItem('user'))
        setId(user.id)
        getLogin().then(res=>{
          let obj = res.data.find(item=>item.id == user.id)
          setUserNames(obj.userName)
        })
      },[])
  return (
    <>
        <NavBar onBack={back}>我的保护</NavBar>
        <div style={{width:"95%",padding:'2.5%',color:'#999',backgroundColor:'#F2F3F7'}}>账号维护</div>
        <List mode='card'>
     <List.Item onClick={changePassword}>修改登录密码</List.Item>  
     <List.Item extra={userNames} onClick={BindMobilePhone}>修改绑定手机</List.Item>  
     </List>
    </>
  )
}
